<template>
  <div class="goods-container">
    <!-- 左侧图片区 -->
    <div class="left">
         <div class="form-check signal-check">
            <input class="form-check-input" type="checkbox" value="" id="singal"  :checked="checked" @change="onCheckBoxChange" />
            <label class="form-check-label" for="singal"> <img :src="thumb" alt="商品图片" class="thumb"> </label>
        </div>
        
    </div>
    <!-- 右侧信息区 -->
    <div class="right">
        <!-- 商品名称 -->
        <div class="top">{{title}}</div>
        <div class="bottom">
            <div class="price">￥{{price}}</div>
            <!-- <div class="count">数量:{{count}}</div> -->
            <es-counter :num="count" :min="1" @numChange="onNumChange"></es-counter>
        </div>
    </div>
  </div>
</template>

<script>
import EsCounter from '../es-counter/Es-Counter.vue'
export default {
    name:'EsGoods',
    emits:['stateChange','countChange'],
    components:{
        EsCounter
    },
    props:{
        // 商品id
        id:{
            type:[String,Number],
            required:true
        },
        // 商品的名称
        title:{
            type:String,
            required:true
        },
        // 商品缩略图
        thumb:{
            type:String,
            required:true
        },
        // 单价
        price:{
            type:Number,
            required:true
        },
        // 总数
        count:{
            type:Number,
            required:true
        },
        // 勾选状态
        checked:{
            type:Boolean,
            required:true
        }
    },
    methods:{
        onCheckBoxChange(e){
            this.$emit('stateChange',{ value:e.target.checked,id:this.id})
        },
        // 获取counter传递上来的值
        onNumChange(e){
            this.$emit('countChange',{
                id:this.id,
                value:e
            })
        }
    }
   
}
</script>

<style lang="less" scoped>
.goods-container{
    + .goods-container{
        border-top:1px solid #efefef;
    }
    display: flex;
    padding: 10px;
    .left{
        margin-right:10px;
        
        .signal-check{
display: flex;
        align-items: center;
        }
        .thumb{
            display: block;
            width: 100px;
            height: 100px;
            background-color: #efefef;
        }
    }
    .right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .top{
            font-weight: bold;
        }
        .bottom{
            display: flex;
            justify-content: space-around;
            align-items: center;
            .price{
                color:red;
                font-weight: bold;
            }
        }
    }
}

</style>